<template>
  <div class="left-top">
    <div class="left-top_header">
      <div
        class="header-item"
        :class="{ active: selectedTab === 'sales' }"
        @click="selectTab('sales')"
      >
        销售喜报
      </div>
      <div
        class="header-item"
        :class="{ active: selectedTab === 'model' }"
        @click="selectTab('model')"
      >
        榜样喜报
      </div>
    </div>
    <div class="carousel-container">
      <div class="carousel-container_titles">
        <el-carousel :autoplay="true" height="100%">
          <el-carousel-item v-for="item in messageList" :key="item">
            <img :src="portalPath+'/r/'+item.slice(1)" alt="" class="carous_img" @click="open(item)" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div>
        <div class="bottom" @click="mored"> <span>更多 ></span></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNavbar } from "@/api/index";
export default {
  name: "LeftTop",
  data() {
    return {
      messageList: [],
      portalPath:window.portalPath,
      selectedTab: "sales", // 默认选中的标签
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    open(item){
  
  
  // 定义一个正则表达式来匹配 `messageId` 参数
  const regex = /[?&]messageId=([^&]*)/;
  const match = item.match(regex);  // 使用 match 来匹配正则表达式
  
  if (match) {
    const messageId = match[1]; // match[1] 是捕获的 messageId 值
 
    window.open( portalPath+"/r/w?sid="+window.sid+"&cmd=com.actionsoft.apps.cms_get_message&messageId=" + messageId, "_blank");

  } else {
  
  }
    },
    mored() {
      if (this.selectedTab === "sales") {
        window.open(
          portalPath+  "/r/w?sid=" +
            window.sid +
            "&cmd=com.actionsoft.apps.cms_site&siteid=635782b9-9acc-4bd1-9c1f-760774874e49&moduleid=89f882f7-ae01-4430-b54d-e504246bf0e1",
          "_blank"
        );
      } else {
        window.open(
          portalPath+ "/r/w?sid=" +
            window.sid +
            "&cmd=com.actionsoft.apps.cms_site&siteid=635782b9-9acc-4bd1-9c1f-760774874e49&moduleid=89f882f7-ae01-4430-b54d-e504246bf0e2",
          "_blank"
        );
      }
    },

    getlist() {
      // 根据选中的标签动态设置 moduleId
      const moduleId =
        this.selectedTab === "sales"
          ? "89f882f7-ae01-4430-b54d-e504246bf0e1"
          : "89f882f7-ae01-4430-b54d-e504246bf0e2";

      const param = {
        sid: window.sid,
        cmd: "com.bono.portal.getViewpager",
        startflag: "0",
        size: "10",
        moduleId: moduleId,
      };

      getNavbar(param).then((res) => {

        const { result, msg, data, id } = res;
        this.messageList = res.data.picUrlList.slice(0, 5);

        // this.shortCuts = res.data.shortCuts;
      });
    },

    selectTab(tab) {
      this.selectedTab = tab; // 切换选中的标签
      this.getlist(); // 切换时发起请求
    },
  },
};
</script>

<style scoped >
.left-top {
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
}

.left-top_header {
  display: flex; /* 使用 flexbox 进行排列 */
  justify-content: space-between; /* 使两个项分开排列 */
  height: 44px;
}

.carousel-container{
  height: calc(100% - 100px);
}
.carousel-container_titles{
  height: 100%;
}

.header-item {
  cursor: pointer; /* 鼠标悬停时显示为可点击 */

  border: 1px solid transparent; /* 默认边框 */

  transition: background-color 0.3s; /* 添加过渡效果 */
 
  font-family: PingFang SC;
  line-height: 44px;
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  width: 50%;
  text-align: center;
}

.header-item.active {
  
  color: white; /* 选中状态字体颜色 */
  background: #1e4398;
  border-radius: 5px;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
}

.carousel-container {
  padding: 10px;
}


.carous_img {
  border-radius: 5px; /* 图片圆角 */

  height: 100%;
  margin: auto;

}
.bottom {
  font-family: PingFang SC;
  font-weight: 700;
  font-size: 14px;
  color: #1e4398;
  text-align: right;

  margin-top: 10px;
}
.bottom span{
  cursor: pointer;
}

/deep/ .el-carousel__button {
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
}
/deep/ .el-carousel--horizonta {
  height: 100% !important;
}
.el-carousel {
  height: 100% !important;
}
</style>
